<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 低版本js引入 -->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="./chengjis.js"></script>
       <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<style>
       ul{ margin-left: 30%;}
       ul li{width: 130px; height: 40px; border: 1.5px solid #000; float: left; list-style: none; line-height: 40px; text-align: center; margin-left: 3px;
       }
        .hit{
            background-color: red;
            
        }
        .box{clear: both;
        }
        .box table{border: 1px solid #000; border-collapse: collapse; margin-top: 50px;
        }
        .box table tr td{border: 1px solid #000; width: 100px; height: 40px; text-align: center;
        }
        #tab tr{display: none;}
       .anniu{background-color: orange; outline: none; border:1px solid #000;}
       #box{text-align: center;}
</style>
</head>
<body>
    <div id="box">
    <h2>学生考试成绩录入</h2>
    <select id="country">
        <option>---请选择学校---</option>
    </select>&emsp;&emsp;
   
    <select id="grade">
        <option>---请选择年级---</option>
    </select>&emsp;&emsp;
   
    <select id="class">
        <option>---请选择班级---</option>
    </select><br/><br/>
    <div>
        姓名: <input type="text" id="full_name"><br/><br/>
        语文: <input type="text" id="chinese"><br/><br/>
        数学: <input type="text" id="math"><br/><br/>
        英语: <input type="text" id="English"><br/><br/>
        <button id="add">添加</button>
     </div>
        <hr/>
        <ul class="nav nav-tabs" role="tablist" id='tabul'>

        </ul>
        <br/><br/><br/>
        <div class="box">
        排序：<button class="btnsort" val="m">数学</button>
        <button  class="btnsort" val="c">语文</button>
        <button  class="btnsort" val="E">英语</button>
        <button  class="btnsort" val="t">总分</button>
        </div><br/>
        </div>
        <div id='stulist'>
            <table class="table table-bordered" style="width: 600px; text-align:center;" >
                <thead>
                    <tr>
                        <th>年级-班级</th>
                        <th>姓名</th>
                        <th>语文</th>
                        <th>数学</th>
                        <th>英语</th>
                        <th>总分</th>
                        <th>平均分</th>
                        <th>名次</th>
                    </tr>
                </thead>
                <tbody id='tlist'>

                </tbody>
            </table>
        </div>
    <script>
        
    //添加本地数据
    function setData(school,obj){
        if(!localStorage.getItem('data')){
            var arr = [[],[],[],[],[]]
            // for(i in data){

            // }
            arr[school].push(obj)
            localStorage.setItem('data',JSON.stringify(arr))
        }else{
            var arr = JSON.parse(localStorage.getItem('data'))
            arr[school].push(obj)
            localStorage.setItem('data',JSON.stringify(arr))
        }
    }
        $(function(){ 
            //三级联动
            showSelect()
            showList()
            //添加数据
            $("#add").click(function(){
                var school = $('#country').val()
                var guojia =$("#country").find("option:selected").text() //country select里的值
                if(!guojia){
                alert('请选择国家') 
                return 
            }
                var nianji =$("#grade").find("option:selected").text() //获取年级 select option的值
              // console.log(nianji)
              if(!nianji){
                alert('请选择年级') 
                return 
            }
               var banji = $("#class").find("option:selected").text() //获取班级 select option的值
               if(!banji){
                alert('请选择班级')
                return
             }
               var nbstr = `${nianji} ${banji}`
              // console.log(nbstr)
               var full_name =$("#full_name").val();
               if(!full_name){
                alert('请填写姓名')
                return
             }
               var chinese = Number($("#chinese").val()); //语文
               if(!chinese){
                alert('请填写语文成绩')
                return
              }
                var  math = Number($("#math").val()); //数学
                if(!math){
                alert('请填写数学成绩')
                return
              }
                var  English = Number($("#English").val()); //英语
                if(!English){
                alert('请填写英语成绩')
                return
             }
                var  zong = parseFloat( chinese+math+English) ; //总分
               // console.log(zong
                var  pingjun = parseFloat((chinese+math+English)/3).toFixed(2);
               // console.log(pingjun)
                    var obj = {  //储存输入框里的值
                        nbstr : nbstr,
                        full_name : full_name,
                        chinese : chinese,
                        math :  math,
                        English : English,
                        zong : zong,
                        pingjun : pingjun,
                    } 
                    setData(school,obj) //学校的下标和obj里的值
                    showList(school) //刷新显示的列表 将刷新的学校下标传参过去
            })
            //显示table列表  school参数下标（默认为0）
            $('.btnsort').click(function(){
                var type = $(this).attr('val')
                $('li').each(function(i){ //循环遍历 tab 切换里的学校
                    if($(this).hasClass('active')){
                        showList(i,type)
                    }
                })
            })

            //显示列表  school参数下标(上面学校的下标)
          function showList(school=0,sort='t'){
                showTabs(school)
                $('#tabul li').click(function(){
                    showList($(this).index()) //将显示列表再刷新一次
                })
                var data = JSON.parse(localStorage.getItem('data'))
                console.log(data)
               if(!data){
                   $('#tlist').html('暂没有数据')
                   return
               }
               var list = data[school] //学校学生列表
               list = dataSort(list,sort) //排序方法调用
               var stuhtml = ''
               for(let i in list){
                stuhtml+=
                `
                <tr>
                        <td>${list[i].nbstr}</td>
                        <td>${list[i].full_name}</td>
                        <td>${list[i].chinese}</td>
                        <td>${list[i].math}</td>
                        <td>${list[i].English}</td>
                        <td>${list[i].zong}</td>
                        <td>${list[i].pingjun}</td>
                        <td>${Number(i)+1}</td>
                       
                   </tr>
                `
               }
               $('#tlist').html(stuhtml)
            }

           //显示tabs标签页
            function showTabs(index){
                var listr = ""
                for(i in chengjis){
                   // console.log(chengjis[i])
                    listr+=`<li>${chengjis[i].country}</li>`
                }
                $('#tabul').html(listr)
                $('#tabul li').css({"backgroud":"white"})
                $('#tabul li').eq(index).css({"background":"red"})
                $("#tabul li").eq(index).addClass('active')
            }
           
             //数据排序 //type : c 语文、 e 英语、 m 数学、
             function dataSort(list,type){
        switch (type) {
            case "c":
                list.sort(function(a,b){
                    return b.chinese-a.chinese
                })
                break;
            case "E":
                list.sort(function(a,b){
                    return b.English-a.English
                })
                break;
            case "m":
                list.sort(function(a,b){
                    return b.math-a.math
                })
                break;    
            default:
                //默认总分t 平均分p
                list.sort(function(a,b){
                    return b.zong-a.zong
                })
                break;
        }
        return list
    }


            //三级联动
            function showSelect(){
                var school=''
                for(i in chengjis){
                    school +=` <option value='${i}'>${chengjis[i].country}</option>`
                }
                $("#country").append(school)
                $("#country").change(function () {
                    $("#grade option:gt(0)").remove()
                    var arr = chengjis[$(this).val()].jibie
                // console.log(arr)
                    var strjibie = ''
                    for(i in arr){
                        strjibie +=` <option value='${$(this).val()}-${i}'>${arr[i].grade}</option>`
                    }
                    $("#grade").append(strjibie)
                })
                $("#grade").change(function () {
                    $("#class option:gt(0)").remove()
                    var arr =$(this).val().split('-')
                    // console.log(arr) 转为数组
                    var clas =chengjis[arr[0]].jibie[arr[1]].class
                // console.log(clas) //班级的集合
                    var html = ''
                for(i in clas){
                    html +=` <option value='${$(this).val()}-${i}'>${clas[i]}</option>`
                    }
                    $("#class").append(html)
                })
            }

          
        })
    </script>
</body>
</html>